<template>
  <view class="chart-radar">
    <view 
      id="radarChart" 
      class="chart-container"
      :prop="chartData"
      :change:prop="echartModule.updateChart"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    // 练习类型
    exerciseType: {
      type: Number,
      default: 0
    },
    // 完整度
    completeness: {
      type: Number,
      default: 0
    },
    // 准确度
    accuracy: {
      type: Number,
      default: 0
    },
    // 流畅度
    fluency: {
      type: Number,
      default: 0
    },
    // 自信度
    confidence: {
      type: Number,
      default: 0
    },
    // 语速音量
    speedVolume: {
      type: Number,
      default: 0
    },
    // 通俗度
    readabilityScore: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      chartData: {
        exerciseType: this.exerciseType,
        completeness: this.completeness,
        accuracy: this.accuracy,
        fluency: this.fluency,
        confidence: this.confidence,
        speedVolume: this.speedVolume,
        readabilityScore: this.readabilityScore
      }
    }
  },
  watch: {
    completeness(val) {
      this.chartData = { ...this.chartData, completeness: val }
    },
    accuracy(val) {
      this.chartData = { ...this.chartData, accuracy: val }
    },
    fluency(val) {
      this.chartData = { ...this.chartData, fluency: val }
    },
    confidence(val) {
      this.chartData = { ...this.chartData, confidence: val }
    },
    speedVolume(val) {
      this.chartData = { ...this.chartData, speedVolume: val }
    },
    exerciseType(val) {
      this.chartData = { ...this.chartData, exerciseType: val }
    }
  },
  mounted() {
  },
  updated() {
  }
  
}
</script>

<script module="echartModule" lang="renderjs">
import * as echarts from 'echarts';
let chart = null

export default {
  mounted() {
    // 动态加载echarts
    this.initChart()
  },
  methods: {
    initChart() {
      const container = document.getElementById('radarChart')
      if (!container || !echarts) return
      
      chart = echarts.init(container)
      
      // 初始化空数据
      this.setOption({
        completeness: 0,
        accuracy: 0,
        fluency: 0,
        confidence: 0,
        speedVolume: 0,
        exerciseType: 0,
      })
    },
    updateChart(newValue, oldValue, ownerInstance, instance) {
      this.$nextTick(() => {
        this.setOption(newValue)
      })
    },
    setOption(data) {
      if (!chart || !echarts) return
      let indexShowNum = 0
      
      const dataValues = [
        data.completeness || 0,
        data.accuracy || 0,
        data.fluency || 0,
        data.confidence || 0,
        data.exerciseType === 102 ? data.speedVolume || 0 : data.readabilityScore || 0
      ]
      
      const dataIndicator = [
        { name: '完整度', max: 100 },
        { name: '准确度', max: 100 },
        { name: '流畅度', max: 100 },
        { name: '自信度', max: 100 },
        { name: data.exerciseType === 102 ? '语速音量' : '通俗度', max: 100 }
      ]
      console.log('----data.exerciseType', data.exerciseType)
      const option = {
        color: ['#315BF4'],
        radar: {
          shape: 'polygon',
          center: ['48%', '60%'],
          radius: '60%',
          indicator: dataIndicator,
          splitNumber: 4,
          name: {
            formatter: function(value, indicator) {
              const index = option.radar.indicator.findIndex(item => item.name === value)
              const dataValue = index !== -1 ? dataValues[index] : 0
              
              // 判断是否需要居中（流畅度和自信度）
              const needCenter = value === '流畅度' || value === '自信度'
              
              // 根据分值确定样式
              let styleKey = 'value'
              if (dataValue <= 59) {
                styleKey = needCenter ? 'valueRedCenter' : 'valueRed'
              } else if (dataValue >= 59 && dataValue <= 69) {
                styleKey = needCenter ? 'valueOrangeCenter' : 'valueOrange'
              } else if (dataValue >= 69 && dataValue <= 85) {
                styleKey = needCenter ? 'valueBlueCenter' : 'valueBlue'
              } else if (dataValue >= 85 && dataValue <= 100) {
                styleKey = needCenter ? 'valueGreenCenter' : 'valueGreen'
              }
              
              return '{name|' + value + '}\n{' + styleKey + '|' + dataValue + '}'
            },
            rich: {
              name: {
                color: '#666666',
                fontSize: 12,
                lineHeight: 20,
                fontWeight: 400
              },
              valueRed: {
                color: '#F02525',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400
              },
              valueOrange: {
                color: '#F28F15',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400
              },
              valueBlue: {
                color: '#315BF4',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400
              },
              valueGreen: {
                color: '#2AB55E',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400
              },
              // 居中版本（用于流畅度和自信度）
              valueRedCenter: {
                color: '#F02525',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400,
                align: 'center'
              },
              valueOrangeCenter: {
                color: '#F28F15',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400,
                align: 'center'
              },
              valueBlueCenter: {
                color: '#315BF4',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400,
                align: 'center'
              },
              valueGreenCenter: {
                color: '#2AB55E',
                fontSize: 14,
                lineHeight: 22,
                fontWeight: 400,
                align: 'center'
              }
            }
          },
          splitLine: {
            lineStyle: {
              color: '#E5E7EB',
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.1)', 'rgba(245, 247, 250, 0.5)']
            }
          },
          axisLine: {
            lineStyle: {
              color: '#E5E7EB',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            color: '#999999',
            fontSize: 10,
            showMinLabel: true,
            showMaxLabel: true,
            formatter: function(value, index) {
              // 只在第一个轴（index为0）显示刻度
              if (indexShowNum < 4) {
                indexShowNum = index
                return value
              }
              return ''
            }
          }
        },
        series: [
          {
            name: '能力评估',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 6,
            data: [
              {
                value: dataValues,
                name: '当前水平',
                itemStyle: {
                  color: '#315BF4'
                },
                areaStyle: {
                  color: 'rgba(49, 91, 244, 0.3)'
                },
                lineStyle: {
                  color: '#315BF4',
                  width: 2
                }
              }
            ],
            label: {
              show: false
            }
          }
        ]
      }
      
      chart.setOption(option, true)
    }
  },
  beforeDestroy() {
    if (chart) {
      chart.dispose()
      chart = null
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-radar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  .chart-container {
    width: 100%;
    height: 500rpx;
  }
}
</style>
